<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>회원 가입</title>

<script>
    function popup_zipcode(){
        window.open("popup_zipcode.jsp","","width=550, height=200");
    }

	var xmlHttp;
	function createHttp(){
		if(window.ActiveXObject){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");	
		}else{
			xmlHttp = new XMLHttpRequest();
		}
	}
	function idCheck(){
		var id = document.frm.m_id.value;
		if(id.length<4){
			document.getElementById("msg").innerHTML = "<font size=2>id는 4글자 이상 영문자입니다.</font>";
			return;
		}
		createHttp();
		//1. 서버응답시 호출되어 응답처리할 콜백함수 등록
		xmlHttp.onreadystatechange=callback;
		//2. 서버로 요청 위한 정보 설정 -open(요청방식,url,비동기여부-true:비동기)
		var url = "idCheck.do?id="+id;
		xmlHttp.open("GET", url, true);
		//3. 전송
		xmlHttp.send(null);
	}
	function callback(){
		if(xmlHttp.readyState==4){
			// 200 : 응답 OK 
			if(xmlHttp.status==200){
				//xmlHttp.responseText --> server의 응답 데이터 
				document.getElementById("msg").innerHTML = xmlHttp.responseText; // responseText가 서버에서 넘어 온 값.
			}
		}
	}

	// 가입처리하는 함수
	function joinMember(){
		var form = document.frm;
		if(form.m_id.value.length < 4 || form.m_id.value.length > 13){
			alert("아이디는 4글자 이상 12자 이하입니다.");
			return;
		}
		if(form.m_password.value.length==0){
			alert("비밀번호를 입력하여 주세요.");
			return;
		}
		if(form.m_name.value.length==0){
			alert("이름을 입력하여 주세요.");
			return;
		}
		if(form.m_tel.value.length==0){
			alert("전화번호를 입력하여 주세요.");
			return;
		}
		if(form.m_zipcode.value.length==0){
			alert("zipcode를 입력하여 주세요.");
			return;
		}
		if(form.m_addressRest.value.length==0 || form.m_address.value.length==0){
			alert("주소를 입력하여 주세요.");
			return;
		}
		form.command.value="registerMember";
		form.action = "join.do";
	}

</script>
</head>

<body>
<p align="center"><img src="img/member_01.gif" width="746" height="31" /></p>
<p>&nbsp;	</p>
<table width="751" height="324" border="1" align="center">
  <tr>
    <td width="173" height="40" bgcolor="#EBEBEB"><div align="left"><strong><font color="FF6000">*</font> <font face="굴림, 돋움, Seoul, 한강체">아이디 </font></strong></div></td>
<td width="409" height="40" colspan="2" bgcolor="#FFFFFF">
        
      <div align="left">
        <input name="text" type="text" id="m_id" size="18" maxlength="16" onkeyup="idCheck()"/>
        <span id="msg"></span>
        </label> 
        <span id="id_text"><strong>* 영문/숫자 4~8자리</strong></span></div></td>
  </tr>
  
  <tr>
    <td height="40" bgcolor="#EBEBEB"><div align="left"><strong><font color="FF6000">*</font> 비밀번호 </strong></div></td>
    <td height="40" colspan="2" bgcolor="#FFFFFF">
      
      <div align="left">
        <input type="password" id="m_password" size="18" maxlength="16"/>
      <span id="pwd_text"> <strong>* 영문,숫자 4~12자리</strong></span> </div></td>
  </tr>
  <tr>
    <td height="40" bgcolor="#EBEBEB"><div align="left"><strong><font color="FF6000">*</font> 이름 </strong></div></td>
    <td height="40" colspan="2" bgcolor="#FFFFFF">
      
      <div align="left">
        <input type="text" id="m_name" size="18" /> 
        </div></td>
  </tr>
  <tr>
	<td bgcolor="#EBEBEB"><div align="left"><strong><font color=FF6000>* </font>전화번호</strong></div></td>
	<td bgcolor="#FFFFFF" class=memberCols2>
	  
      <div align="left">
        <input type=text name=m_tel size=4 maxlength=4> 
	    -
	    <input type=text name=m_tel size=4 maxlength=4> 
	    -
	    <input type=text name=m_tel size=4 maxlength=4>
        </div></td>
</tr>
 <tr>
	<td height="122" bgcolor="#EBEBEB"><div align="left">
	  <p><strong><font color="FF6000">*</font> 우편번호 </strong></p>
	  <p>&nbsp;</p>
	  <p><strong><font color="FF6000">*</font> 주소(상세주소)</strong></p>
	  </div></td>
	<td bgcolor="#FFFFFF" class=memberCols2> 
	  
      <div align="left">
        <table width="396" height="120">
          <tr>
            <td height="44">
              <input type=text name=m_zipcode size=7 readonly="readonly">
            <input type ="button" value="우편번호찾기" onClick="popup_zipcode()"/>		</td>
          </tr>
          <tr>
            <td>
              <input type=text name=m_address readonly="readonly" size=50><br/>
            <input type=text name=m_addressRest size=50>		</td>
          </tr>
          </table>
    </div></td>
</tr>
  <tr>
    <td height="46" bgcolor="#EBEBEB"><div align="left"><strong><font color="FF6000">*</font> 이메일  </strong></div></td>
    <td height="46" colspan="2" bgcolor="#FFFFFF">
      
      <div align="left">
        <input type="text" id="m_email" size="18" /> 
      </div></td>
  </tr>
</table>
<p align="center">

 <input type="image" src="img/btn/member_06.gif" onClick="joinMember()"/>
</p>
</body>
</html>
